<template>
  <div class="single-root-node" style="color: pink" @click="console.log('子组件事件')">
    单根节点透传属性自动被添加到根元素上
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'TransparentTransmissionAttributeChildrenA',
  props: ['propsValue'],
  created() {
    // JS中访问透传属性，$attrs中不包括props和emits中声明的属性，kebab-case格式透传属性被原封不动的添加到$attrs，@event透传事件以onEvent函数添加到$attrs
    console.log(this.$attrs);// {class: 'parent-class', style: {color: 'skyblue', font-weight: 'bold'}, onClick: $event => (console.log('父组件事件'))}
  }
});
</script>

<style scoped>
.single-root-node {
  font-size: 30px;
}
</style>